<template>
  <div class="dataset_list_headers">
    <div style="display:flex;align-items: center;">
      <div class="bot_page_icon"></div>
      <div style="margin-left:10px;font-size: 20px;font-weight: 600;color: rgba(0, 0, 0, 0.75);">{{pageheaderName}}</div>
      <div>
        <view-linked-info :linkKey="'Bots'" ></view-linked-info>
      </div>
    </div>
    <div class="list_headers_rightlink">
      <el-dropdown @command="clickDropdownReport" v-if="viewValue === 'List'">
        <span class="el-dropdown-link" style="margin-right: 20px;">
          Analytical Dashboard<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">Message Dashboard</el-dropdown-item>
          <el-dropdown-item command="2">Trigger Dashboard</el-dropdown-item>
          <el-dropdown-item command="3">Usage Dashboard</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown @command="clickSetting" v-if="isAlaCarte && $hasPermission('sys:bot:assign-license')">
        <span class="el-dropdown-link" style="margin-right: 20px;">
          Setting<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1" v-if="isAlaCarte && $hasPermission('sys:bot:assign-license')">Assign License</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown size="small"
                   placement="bottom-start"
                   style="margin-right:20px"
                   @command="clickDropdown">
        <div class="cursor_pointer list_view"
             style="border-radius:2px;display:flex;align-items:center;width:105px;height:30px;padding:0 12px;">
          <i :class="viewValueSelf === 'List'? 'cuifont icon_list' : 'cuifont icon_table'"
             style="font-size:14px"></i>
          <span style="margin:0 20px 0 10px;font-size:14px">{{viewValueSelf}}</span>
          <i class="cuifont icon_chevron_down"
             style="transform: scale(0.5)"></i>
        </div>
        <template #dropdown>
          <el-dropdown-menu slot="dropdown"
                            style="width:205px">
            <el-dropdown-item v-for="item in viewValueList"
                              :key="item.value"
                              :command="item.value"
                              style="height:40px;line-height:40px;font-size:14px;padding:0 10px"
                              :style="{color:item.value === viewValueSelf?'#17B3A3': ''}"><i :class="item.icon" style="font-size:14px"></i><span style="margin-left:5px;font-size:14px">{{item.label}}</span><i v-if="item.value === viewValue"
                 class="cuifont icon_checkmark"
                 style="float:right;font-size:14px"></i></el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div class="rightlink cursor_pointer"
           @click="$router.push({ name: 'mspbots-client-desired-index' })">
        <div class="rightlink_icon"></div>
        <span>{{$t('custom.bots.requestNewBot')}}</span>
      </div>
    </div>
    <bot-user v-model="showBotUser" v-if="isAlaCarte && $hasPermission('sys:bot:assign-license')"></bot-user>
  </div>

</template>
<script>
import BotUser from '@/views/modules/mspbots/bots-bak/my-bots/viewComponents/botUser'
import { stringRemoveSpaceEqual } from '@/utils'
export default {
  props: {
    viewValue: {
      type: String,
      default: 'List'
    },
    pageheaderName: {
      type: String,
      default: ''
    }
  },
  components: {
    BotUser
  },
  computed: {
    assignLicense () {
      return this.$store.state.bot.assignLicense
    }
  },
  watch: {
    assignLicense (val) {
      if (val && this.isAlaCarte && this.$hasPermission('sys:bot:assign-license')) {
        this.showBotUser = true
      }
      if (val && !(this.isAlaCarte || this.$hasPermission('sys:bot:assign-license'))) {
        this.$message({
          message: "You don't have permission yet!",
          type: 'warning',
          center:true
        });
      }
    },
    showBotUser (val) {
      this.$store.dispatch('setAssignLicense', val)
    }
  },
  data () {
    return {
      viewValueSelf: this.viewValue,
      viewValueList: [{ label: 'Grid', value: 'Grid', icon: 'cuifont icon_table' }, { label: 'List', value: 'List', icon: 'cuifont icon_list' }],
      showBotUser: false,
      isAlaCarte: false
    }
  },
  methods: {
    clickDropdown (val) {
      this.viewValueSelf = val
      localStorage.setItem('botview', val)
      this.$emit('clickDropdown', val)
    },
    clickDropdownReport (val) {
      this.$emit('botViewReportLink', val)
    },
    clickSetting (val) {
      if (val === '1') {
        this.showBotUser = true
      }
    },
    async getBundleInfo () {
      let bundlesTable = {}
      const { subList } = this.$interface.pay
      const tenantCode = this.tenantCode || this.$store.state.user.tenantCode
      const { data } = await subList({ tenantCode })
      if (data.data) {
        bundlesTable = this._.find(data.data, (o) => { return o.type === 0 })
        this.isAlaCarte = !!(bundlesTable && stringRemoveSpaceEqual(bundlesTable.name, 'A la Carte'));
      }
    }
  },
  created () {
    this.getBundleInfo()
  }
}
</script>
<style lang="scss">
.bot_page_icon {
  width: 20px;
  height: 20px;
  background-image: url("#{$--ossLink}/app/view_pageheader/bot.png");
}
.list_view:hover {
  color: $--theme-color;
  background-color: $--theme-color-background;
}
// .list_dataset {
//   height: 100%;
  .dataset_list_headers {
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 0 20px;
    border-radius: 4px;
    margin-bottom: 10px;
    .list_headers_rightlink {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-dropdown-link{
        width: 153px;
        height: 30px;
        display: inline-block;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
      }
      .el-dropdown-link:hover{
        color: $--theme-color;
        //background-color: $--theme-color-background;
      }
    }
    .rightlink {
      width: 209px;
      height: 30px;
      padding: 0 12px;
      border-radius: 4px;
      background-image: url("#{$--ossLink}/app/view_pageheader/dataset_bg.png");
      background-size: 209px 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .rightlink_icon {
        background-image: url("#{$--ossLink}/app/view_pageheader/rightlink_icon.png");
        width: 30px;
        height: 30px;
        background-size: 30px;
        margin-right: 10px;
      }
      span {
        font-weight: 600;
        color: #ffffff;
        line-height: 20px;
      }
      &:hover {
        transform: translateY(-3px);
        box-shadow: 0px 2px 6px 0px #b8caea;
      }
    }
  }
// }
</style>
